'use client'

import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
import { Badge } from '@/components/ui/badge'
import { formatDate } from '@/lib/utils'
import { 
  Plus, 
  Edit, 
  Trash2, 
  Download, 
  Eye,
  User,
  FileText,
  BookOpen
} from 'lucide-react'

const recentActivities = [
  {
    id: 1,
    user: {
      name: '张三',
      avatar: '/avatars/01.png',
      email: 'zhangsan@example.com'
    },
    action: '创建了文章',
    target: '《React 开发最佳实践》',
    type: 'create' as const,
    timestamp: new Date(Date.now() - 5 * 60 * 1000), // 5分钟前
    category: '技术文档'
  },
  {
    id: 2,
    user: {
      name: '李四',
      avatar: '/avatars/02.png',
      email: 'lisi@example.com'
    },
    action: '更新了文章',
    target: '《Vue.js 组件设计》',
    type: 'update' as const,
    timestamp: new Date(Date.now() - 15 * 60 * 1000), // 15分钟前
    category: '前端开发'
  },
  {
    id: 3,
    user: {
      name: '王五',
      avatar: '/avatars/03.png',
      email: 'wangwu@example.com'
    },
    action: '删除了文件',
    target: 'old-document.pdf',
    type: 'delete' as const,
    timestamp: new Date(Date.now() - 30 * 60 * 1000), // 30分钟前
    category: '文档管理'
  },
  {
    id: 4,
    user: {
      name: '赵六',
      avatar: '/avatars/04.png',
      email: 'zhaoliu@example.com'
    },
    action: '下载了文档',
    target: '《系统架构设计》',
    type: 'download' as const,
    timestamp: new Date(Date.now() - 45 * 60 * 1000), // 45分钟前
    category: '系统设计'
  },
  {
    id: 5,
    user: {
      name: '孙七',
      avatar: '/avatars/05.png',
      email: 'sunqi@example.com'
    },
    action: '查看了统计',
    target: '用户访问报告',
    type: 'view' as const,
    timestamp: new Date(Date.now() - 60 * 60 * 1000), // 1小时前
    category: '数据分析'
  }
]

const getActionIcon = (type: 'create' | 'update' | 'delete' | 'download' | 'view') => {
  switch (type) {
    case 'create':
      return <Plus className="h-4 w-4 text-green-500" />
    case 'update':
      return <Edit className="h-4 w-4 text-blue-500" />
    case 'delete':
      return <Trash2 className="h-4 w-4 text-red-500" />
    case 'download':
      return <Download className="h-4 w-4 text-purple-500" />
    case 'view':
      return <Eye className="h-4 w-4 text-gray-500" />
  }
}

const getActionColor = (type: 'create' | 'update' | 'delete' | 'download' | 'view') => {
  switch (type) {
    case 'create':
      return 'bg-green-100 text-green-800'
    case 'update':
      return 'bg-blue-100 text-blue-800'
    case 'delete':
      return 'bg-red-100 text-red-800'
    case 'download':
      return 'bg-purple-100 text-purple-800'
    case 'view':
      return 'bg-gray-100 text-gray-800'
  }
}

export function RecentActivity() {
  return (
    <Card>
      <CardHeader>
        <CardTitle className="flex items-center space-x-2">
          <BookOpen className="h-5 w-5" />
          <span>最近活动</span>
        </CardTitle>
      </CardHeader>
      <CardContent>
        <div className="space-y-4">
          {recentActivities.map((activity) => (
            <div key={activity.id} className="flex items-start space-x-3 p-3 border rounded-lg hover:bg-accent/50 transition-colors">
              <Avatar className="h-8 w-8">
                <AvatarImage src={activity.user.avatar} alt={activity.user.name} />
                <AvatarFallback>{activity.user.name.charAt(0)}</AvatarFallback>
              </Avatar>
              
              <div className="flex-1 min-w-0">
                <div className="flex items-center space-x-2">
                  <span className="font-medium text-sm">{activity.user.name}</span>
                  <span className="text-sm text-muted-foreground">{activity.action}</span>
                  <span className="font-medium text-sm truncate">{activity.target}</span>
                </div>
                
                <div className="flex items-center space-x-2 mt-1">
                  <Badge variant="outline" className={getActionColor(activity.type)}>
                    {getActionIcon(activity.type)}
                    <span className="ml-1">{activity.category}</span>
                  </Badge>
                  <span className="text-xs text-muted-foreground">
                    {formatDate(activity.timestamp, 'relative')}
                  </span>
                </div>
              </div>
            </div>
          ))}
        </div>
        
        <div className="mt-4 pt-4 border-t">
          <button className="w-full text-sm text-muted-foreground hover:text-foreground transition-colors">
            查看所有活动 →
          </button>
        </div>
      </CardContent>
    </Card>
  )
}
